<template>
  <div class="teachingCourses">
    <div
      v-if="!coursesData.length"
      style="padding-top: 20px; padding-left: 10px"
    >
      暂无课程
    </div>
    <div
      class="course hover_boxShadow_defaut_shadow"
      v-for="(item, index) in coursesData"
      :key="index"
      :style="{ 'margin-right': (index + 1) % 4 === 0 ? 0 : '20px' }"
    >
      <div class="containerBox">
        <div class="iconBox">
          <router-link
            :to="{
              name: 'Coursedetail',
              query: { courseId: item.courseID, currNo: item.currNo },
            }"
          >
            <img v-lazy=" item.iconPath" />
          </router-link>
        </div>
        <router-link
          :to="{
            name: 'Coursedetail',
            query: { courseId: item.courseID, currNo: item.currNo },
          }"
        >
          <div class="courseName">{{ item.name | filterName }}</div>
        </router-link>
        <div class="courseInfo">
          <div class="desc">选修学生：</div>
          <!-- <div class="desc">选修学生 60</div> -->
          <!-- <div class="desc">选修学生 60</div> -->
        </div>
        <!-- <div class="time">上课时间：</div> -->
        <div class="courseDesc">简介：{{ item.description || "无" }}</div>
      </div>
      <div class="btnBox">
        <div class="followBtnBox">
          <router-link
            :to="{
              name: 'Statistics',
              query: { currNo: item.currNo, courseId: item.courseID },
              params: { id: item.currNo }
            }"
          >
            <button class="firstBtn">统计</button>
          </router-link>
        </div>
        <!-- <button
          class="buttonAcitve secondBtb"
          @click="handelJumpRoute('FollowStudent', item)"
        >
          跟进
        </button> -->
        <button
          class="buttonAcitve"
          @click="handelJumpRoute('StudentList', item)"
        >
          批阅
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurriculumlist } from "@/request/courses";
import { location } from "@/util/tool";
import { mapState } from "vuex";

export default {
  data() {
    return {
      coursesData: [],
      activeDropdownBtn: [],
      location: location(window),
    };
  },
  filters: {
    filterName(value) {
      return value.substring(0,value.lastIndexOf('_') == -1 ? value.length:value.lastIndexOf('_'));
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  created() {
    this.fetchCurriculumlist();
  },
  methods: {
    // 获取可选修课程
    fetchCurriculumlist() {
      getCurriculumlist().then((data) => {
        // if (res.errno === 0) {
          // res.data = res.data?.filter(item=> item.tutorStaffUserID === this.userInfo.userID)
          this.coursesData = data?.reverse() || [];
        // }
      });
    },
    // 监听展开、隐藏
    handelVisibleChange(key, val) {
      if (val) {
        this.activeDropdownBtn.push(key);
      } else {
        this.activeDropdownBtn = this.activeDropdownBtn.filter(
          (item) => item !== key
        );
      }
    },
    // 路由跳转
    handelJumpRoute(routeName, item) {
      this.$router.push({
        name: routeName,
        query: {
          currNo: item.currNo,
          courseID: item.courseID,
        },
      });
    },
  },
};
</script>

<style lang="stylus">
.teachingCourses {
  padding: 5px 0;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  max-width: 1200px;

  .course {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 25px;
    width: 285px;
    height: 340px;
    background-color: #ffffff;
    // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
    border-radius: 5px;
    overflow: hidden;

    .containerBox {
      padding: 17px 15px 0;

      .iconBox {
        width: 255px;
        height: 146px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .courseName {
        margin-top: 7px;
        line-height: 27px;
        font-family: PMingLiU-ExtB;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
      }

      .courseDesc {
        margin-top: 4px;
        line-height: 19px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #999999;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .courseInfo {
        margin-top: 9px;
        line-height: 19px;
        display: flex;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        .desc {
          margin: 0 10px;
          position: relative;
        }

        .desc:first-child {
          margin-left: 0;
        }

        .desc:last-child {
          margin-right: 0;
        }

        .desc::after {
          position: absolute;
          content: '';
          top: 1.5px;
          right: -10px;
          height: 15px;
          width: 1px;
          background: #666666;
        }

        .desc:last-child::after {
          content: none;
        }
      }

      .time {
        margin-top: 10px;
        line-height: 19px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666666;
      }
    }

    .btnBox {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 36px;
      border-top: 1px solid #d3dae4;

      .followBtnBox {
        position: relative;
        flex: 1;
        height: 100%;
      }

      button {
        cursor: pointer;
        flex: 1;
        padding: 0;
        position: relative;
        height: 100%;
        width: 100%;
        background: #fff;
        border: none;
        border-radius: 0;
        text-align: center;
        font-family: PMingLiU-ExtB;
        font-size: 16px;
        color: #666666;
      }

      button:hover {
        background: #1c4e93;
        color: #fff;
      }

      .secondBtb:after {
        z-index: 1;
        position: absolute;
        content: '';
        top: 9px;
        right: 0;
        // bottom: 0;
        height: 18px;
        width: 1px;
        background: #becce0;
      }

      .secondBtb:before {
        z-index: 1;
        position: absolute;
        content: '';
        top: 9px;
        left: -1px;
        height: 18px;
        width: 1px;
        background: #becce0;
      }

      .secondBtb:hover:after, .secondBtb:hover:before {
        content: none;
      }

      .firstBtn:hover {
        z-index: 9;
      }
    }
  }
}

.course-dropdwon-memu {
  padding: 11px 7px 4px;
  margin-bottom: 0 !important;
  width: 142.5px;
  height: 90px;
  background-color: #ffffff;
  border-radius: 5px 5px 0px 0px;
  border: solid 1px #d3dae4;

  .popper__arrow {
    border: 0;
  }

  .popper__arrow::after {
    border: 0;
  }

  .el-dropdown-menu__item {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    text-align: center;
    font-family: PMingLiU-ExtB;
    font-size: 16px;
    color: #333333;

    a {
      color: inherit;
    }
  }

  .el-dropdown-menu__item:hover {
    background-color: #f3bd62;
    color: #fff;
  }

  .el-dropdown-menu__item:first-child::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #d3dae4;
  }

  .el-dropdown-menu__item:hover {
    content: none;
  }

  .el-dropdown-menu__item:hover::after {
    z-index: 99;
    position: absolute;
    content: '';
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
  }
}
</style>